<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game</title>
    <link rel="stylesheet" href="/resource/static/css/reset.css">
    <style>
        body main{
            background: rgba(255, 255, 255, 0);
        }
        main .container{
            max-width: 96rem;
            margin: 0 auto;
        }
        canvas{
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        img {
            vertical-align: middle;
            border: 0;
        }
        .col-box{
            margin-top: 1rem;
        }
        .column{
            float: left;
            width: 30rem;
            min-height: 0.1rem;
            margin-right: 1rem;
            margin-left: 1rem;
            margin-bottom: 2rem;
            background-color: #FFF;
            border-radius: 0.5rem;
            box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.18);
            position: relative;
            transition: all 1s ease 0s;
            overflow: hidden;
        }
        .column > a{
            display: block;
        }
        .column img{
            width: 100%;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            transition: all 1s ease 0s;
        }
        .column img:hover{
            transform: scale(1.05);
        }
        .cover-info {
            padding: 6px 15px 28px;
            height: 80px;
            overflow: hidden;
        }
        .cover-info a {
            display: block;
            color: #60BDE8;
        }
        .cover-info h4 {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
            display: block;
            font-weight: bold;
            line-height: 18px;
            margin-top: 7px;
            margin-bottom: 5px;
        }
        .cover-info small {
            color: #838383;
            padding-bottom: 1rem;
        }
        .cover-fields {
            bottom: 34px;
            font-size: 12px;
            height: 35px;
            left: 10px;
            line-height: 35px;
            max-width: 210px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 15px;
            padding-right: 15px;
        }
    </style>
</head>
<body>
<div id="header"></div>
<main>
    <div class="container">
        <h2 class="page-title white">Canvas 绘制的小游戏</h2>
        <div class="col-box">
            <div class="column">
                <a href="./AudioGame/">
                    <img src="/resource/static/images/game_column_audio.png" alt="">
                </a>
                <div class="cover-info">
                    <a href="./AudioGame">
                        <h4>HTML5 canvas使用声音控制的小游戏</h4>
                    </a>
                    <small>
                        这是一款HTML5 canvas麦克风声音控制的小游戏。该游戏使用了HTML5中的麦克风使用方式，通过分析麦克分的声音的分贝的大小控制角色跳跃，请尽情的放声大吼吧！
                    </small>
                </div>
                <div class="cover-fields">
                    <i></i>&nbsp游戏，Audio
                </div>
            </div>
            <div class="column">
                <a href="./Chameleon/">
                    <img src="/resource/static/images/game_column_Chameleon.png" alt="">
                </a>
                <div class="cover-info">
                    <a href="./Chameleon/">
                        <h4>HTML5 canvas跳跃小游戏</h4>
                    </a>
                    <small>请注意切换角色的颜色，想获得更多分数吗？那就尽量多待在白色云梯上吧！</small>
                </div>
                <div class="cover-fields">
                    <i></i>&nbsp游戏，Audio
                </div>
            </div>
            <div class="column">
                <a href="./balloon/">
                    <img src="/resource/static/images/game_column_balloon.png" alt="">
                </a>
                <div class="cover-info">
                    <a href="./balloon/">
                        <h4>HTML5 canvas戳气球小游戏</h4>
                    </a>
                    <small>
                        体会将气球戳爆的快感，请不要放过每一个气球。
                    </small>
                </div>
                <div class="cover-fields">
                    <i></i>&nbsp游戏，Audio
                </div>
            </div>
            <div class="column">
                <a href="">
                    <img src="/resource/static/images/game_column_balloon.png" alt="">
                </a>
                <div class="cover-info">
                    <a href="">
                        <h4>HTML5 canvas使用声音控制的小游戏</h4>
                    </a>
                    <small>
                        这是一款HTML5 canvas麦克风声音控制的小游戏。该游戏使用了HTML5中的麦克风使用方式，通过分析麦克分的声音的分贝的大小控制角色跳跃，请尽情的放声大吼吧！
                    </small>
                </div>
                <div class="cover-fields">
                    <i></i>&nbsp游戏，Audio
                </div>
            </div>
        </div>
    </div>
</main>
<div id="footer"></div>
<script src="/resource/dist/build.js"></script>
<script>
    var width, height;
    var step = 0;
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')

    var bg = [13, 27, 34]



    document.getElementsByTagName('body')[0].appendChild(canvas)

    // mouse coordinates
    // var mousex = window.innerWidth / 2, mousey = window.innerHeight;
    document.onmousedown = function(e){
        // pt = pt === pt1 ? pt2 : pt1
        pt2.x = e.pageX;
        pt2.y = e.pageY;
    }
    document.onmousemove = function(e){
        pt1.x = e.pageX;
        pt1.y = e.pageY;
    }
    var pt1 = {x:window.innerWidth*0.2, y:window.innerHeight*0.3}
    var pt2 = {x:window.innerWidth*0.8, y:window.innerHeight*0.7}

    window.addEventListener('resize', setup)

    setup()

    function setup() {
        canvas.width = width = window.innerWidth
        canvas.height = height = window.innerHeight

        ctx.beginPath();
        ctx.rect(0, 0, width, height)
        ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
        ctx.fill()

        pt1 = {x:window.innerWidth*0.2, y:window.innerHeight*0.2}
        pt2 = {x:window.innerWidth*0.8, y:window.innerHeight*0.8}
        // draw()
    }

    setInterval(animate, 60)
    // window.requestAnimationFrame(animate);

    function blur(ctx,canvas,amt) {
        ctx.filter = `blur(${amt}px)`
        ctx.drawImage(canvas, 0, 0)
        ctx.filter = 'none'
    }

    function fade(ctx, amt, width, height) {
        ctx.beginPath();
        ctx.rect(0, 0, width, height)
        ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
        ctx.fill()
    }

    function animate() {
        step++

        blur(ctx, canvas, 1)
        draw()
        fade(ctx, 0.17, width, height)

        // window.requestAnimationFrame(function(){animate()})
    }

    function draw () {

        var iterations = [pt1, pt2]
        var newiterations, i, j
        for (i = 0; i < 8; i++) {
            newiterations = [iterations[0]]
            for(j = 1; j < iterations.length; j++) {
                newiterations.push(getRandMidpoint(iterations[j-1], iterations[j], 200/(i*i+1)))
                newiterations.push(iterations[j])
            }
            iterations = newiterations.concat([])
        }
        ctx.beginPath();
        ctx.moveTo(iterations[0].x, iterations[0].y);
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#d4e4fb';
        ctx.strokeStyle = `hsla(${Math.sin( step / 30) * 120 + 50},${90}%,${70}%,1)`
        for (i = 1; i < iterations.length; i++) {
            ctx.lineTo(iterations[i].x, iterations[i].y);
        }
        ctx.stroke()
        ctx.closePath()
    }

    function getRandMidpoint(pa, pb, range) {
        var a = Math.atan2(pb.y-pa.y, pb.x-pa.x) + Math.PI/2
        var half = {y:(pb.y-pa.y)/2 + pa.y, x:(pb.x-pa.x)/2 + pa.x}
        var offset = Math.random() * range - range/2
        var ho = {
            x: Math.cos(a) * offset + half.x,
            y: Math.sin(a) * offset + half.y
        }
        return ho
    }
</script>
</body>
</html>